<template>
	<!-- 系统消息 -->
	<view class="message-main">
		<!-- 		<view class="message-option">
			<view class="option-left">
				<view class="option">
					<u-checkbox-group v-model="selectAllShop" @change="(id) => selectGroupAllShop(id)" shape="circle">
						<u-checkbox activeColor="#e43927" label="全选" :name="index"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="option-right">
				<view class="option" @click="deleteAllMessage">
					<uni-icons type="trash-filled" size="20" style="margin-right: 2px" color="#444"></uni-icons>
					删除消息
				</view>
				<view class="option">
					{{ isOpen ? '管理' : '完成' }}
				</view>
			</view>
		</view> -->
		<view style="box-sizing: border-box; padding: 20rpx; padding-top: 0px">
			<view class="message-item" v-for="item in messageList" :key="item.id" @click="getOpen(item.id)">
				<view class="message-info">
					<view class="message-header">
						<view class="name">
							{{ item.name }}
						</view>
						<view class="tags">
							<uni-tag text="系统消息" type="error" size="mini" />
						</view>
					</view>
					<view class="message-content" v-html="item.content"></view>
					<view class="message-yd">
						<view class="btn" @click.stop="getuserNoticeMark(item.id)">标记已读</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="isOpen" @close="getClose" closeable :round="20">
			<view class="messageInfo-header">
				消息详情
			</view>
			<view v-html="messageInfo" class="messageInfo"></view>
		</u-popup>
	</view>
</template>

<script>
import { userNotice, userNoticeMark,userNoticeDetail } from '../../api/home/index.js';
export default {
	data() {
		return {
			isOpen: false,
			messageList: [],
			messageInfo:""
		};
	},
	onLoad() {
		this.getUserNotice();
	},
	methods: {
		async getUserNotice() {
			try {
				const resData = await userNotice();
				this.messageList = resData.data.data;
			} catch (e) {
				throw Error(e);
				//TODO handle the exception
			}
		},

		async getuserNoticeMark(id) {
			try {
				const resData = await userNoticeMark({
					id
				});
				if (resData.code == 1) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
				}
			} catch (e) {
				throw Error(e);
				//TODO handle the exception
			}
		},
		
		getClose(){
			this.isOpen = false;
		},
		
		async getOpen(id){
			try{
				const resData = await userNoticeDetail({
					id
				})
				this.isOpen = true;
				this.messageInfo = resData.data.content;
			}catch(e){
				throw Error(e);
				//TODO handle the exception
			}
		}
	}
};
</script>

<style scoped lang="scss">
.message-main {
	.message-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 50px;
		font-size: 28rpx;
		.option-left {
			.option {
				margin: 0px 20rpx;
			}
		}
		.option-right {
			width: 200px;
			display: flex;
			justify-content: flex-end;
			color: #444;
			.option {
				margin: 0px 20rpx;
			}
		}
	}
	.message-item {
		display: flex;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin-top: 20rpx;
		.message-change {
			margin-right: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.message-info {
			width: 100%;
			.message-header {
				color: #444;
				font-size: 28rpx;
				font-weight: bold;
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				.name {
					flex: 1;
				}
				.tags {
					margin-left: 10px;
				}
			}

			.message-content {
				color: #999;
				font-size: 26rpx;
				padding: 10px 0px;
				border-bottom: 1px #f3f3f3 solid;
				margin-bottom: 10px;
			}

			.message-yd {
				float: right;
				.btn {
					width: 80px;
					font-size: 12px;
					text-align: center;
					height: 30px;
					border-radius: 4px;
					background-color: #f3f3f3;
					color: #444;
					line-height: 30px;
				}
			}
		}
	}
}

.messageInfo{
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 13px;
	color: #444;
	height: 60vh;
	overflow-y: scroll;
}

.messageInfo-header{
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	color: #444;
	font-weight: bold;
}
</style>
